<template>
  <view class="container">
    <!-- 搜索框 -->
    <input type="text" v-model="queryObject" placeholder="搜索药品" @input="onSearchInput" class="search-input" />
    <button @click="onSearchClick">搜索</button>
    <!-- 搜索结果列表 -->
    <view class="container"  v-if="medicineList.length > 0" >
      <view class="doctor-list-wrapper">
        <view class="doctor-info" v-for="(medicine, index) in medicineList" :key="index">
          <view class="doctor-left" @click="navToDetailPage(medicine.id)">
            <image class="doctor-avatar" :src="medicine.pic.split(',')[0]" mode="aspectFill" @click="navToDetailPage(medicine.id)"></image>
          </view>
          <view class="doctor-right" @click="navToDetailPage(medicine.id)">
            <view class="doctor-detail">
              <text class="doctor-title" v-html=" medicine.name"></text>
              <text class="doctor-title">{{ medicine.sku }}</text>
              <view class="doctor-meta">
                <text class="doctor-name" style="color: #918b8b;" v-if="medicine.indicativeFunctions.length<20">{{ medicine.indicativeFunctions }}&nbsp;&nbsp;</text><br>
                <text class="doctor-name" style="color: #918b8b;" v-if="medicine.indicativeFunctions.length>=20">{{ medicine.indicativeFunctions }}&nbsp;&nbsp;</text><br>
                <text class="doctor-specialty" style="color: #da4f4f;">￥{{ medicine.actualSalesUnitPrice }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
<!--    <view v-if="medicineList.length > 0" class="result-list">-->
<!--      <view-->
<!--          v-for="(medicine, index) in medicineList"-->
<!--          :key="medicine.id"-->
<!--          class="result-item"-->
<!--          @click="navToDetailPage(medicine.id)"-->
<!--      >-->
<!--        <image :src="medicine.pic.split(',')[0]" />-->
<!--        <button @click="navToDetailPage(medicine.id)">{{ medicine.name }} {{medicine.sku}} ￥{{medicine.actualSalesUnitPrice}}</button>-->
<!--      </view>-->
<!--    </view>-->

<!--     无搜索结果提示-->
    <view v-else-if="queryObject.trim() !== ''" class="no-results">
      没有找到相关药品
    </view>
  </view>
</template>

<script>
import { listMedicine} from "@/api/medicine/medicine";
import {searchMedicine} from "@/api/medicine/es";

export default {
  data() {
    return {
      queryObject: '',
      medicineList: [],
      // searchObject: {},
      searchObject: {
        indexName: 'medical',
        pageInfo:{
          num: null,
          size: null
        },
        orderInfo: {
          orderType: null,
          orderField: null
        },
        matchQueryInfo: {
          keyWord: 'name',
          searchFields: []
        }
      }
    };
  },
  methods: {
    onSearchInput(event) {
      this.queryObject = event.target.value;
      this.performSearch();
    },
    onSearchClick() {
      this.performSearch();
    },
    performSearch() {
      // 假设findMedicine API支持通过name字段进行搜索
      // 这里可能需要调整以适应实际的API接口
      // this.searchObject.name = this.queryObject
      this.searchObject.matchQueryInfo.searchFields[0] = this.queryObject
      searchMedicine(this.searchObject).then(res => {
        this.medicineList = res.data;
      }).catch(error => {
        console.error('搜索失败:', error);
      });
      // listMedicine(this.searchObject).then(res => {
      //   this.medicineList = res.data.rows; // 全部的药品列表
      // }).catch(error => {
      //   console.error('搜索失败:', error);
      // });
    },
    navToDetailPage(id) {
      uni.navigateTo({
        url: `/pages/shop/detail?id=${id}`
      });
    },
  }
};
</script>

<style scoped>
.container {
  padding: 20px;
  background-color: #f5f5f5;
}
/* 医生列表容器样式 */
.doctor-list-wrapper {
  display: flex;
  flex-direction: column;
  background-color: #f9f9f9;
  padding: 3px;
  border-radius: 8px;
}

/* 医生信息块样式 */
.doctor-info {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  background-color: #ffffff;
  padding: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

/* 头像左侧容器样式 */
.doctor-left {
  flex: 0 0 100px; /* 固定宽度为100px */
  margin-right: 15px;
}

/* 头像样式 */
.doctor-avatar {
  width: 100px;
  height: 100px;
  border-radius: 0;
}

/* 文字信息右侧容器样式 */
.doctor-right {
  flex: 1; /* 占据剩余空间 */
  display: flex;
  flex-direction: column;
  justify-content: center; /* 垂直居中 */
}

/* 医生详细信息样式 */
.doctor-detail {
  width: 100%;
}

/* 医生姓名样式 */
.doctor-name {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

/* 医生元信息样式（医院名称和科室） */
.doctor-meta {
  margin-bottom: 15px;
}


.result-list {
  margin-top: 16px;
}

.result-item {
  padding: 12px;
  background-color: white;
  border-bottom: 1px solid #eee;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.result-item:hover {
  background-color: #f0f9ff;
}

.result-item .name {
  font-size: 16px;
  color: #333;
}

.no-results {
  margin-top: 16px;
  padding: 12px;
  background-color: #fff3f3;
  border: 1px solid #ffcccc;
  border-radius: 4px;
  color: #ff4d4f;
  font-size: 14px;
  text-align: center;
}

</style>
